<template>
  <view class="detailtitle">
    <view class="top">
      <Parents
        :workArea="parents"
        :value="parentValue"
        :changePicker="changePickerParent"
        title="父母状况"
      ></Parents>
      <Parents
        :workArea="stay"
        :value="stayValue"
        :changePicker="changePickerStay"
        title="与Ta父母同住"
      ></Parents>
      <Parents
        :workArea="smoke"
        :value="smokeValue"
        :changePicker="changePickerSmoke"
        title="是否吸烟"
      ></Parents>
      <Parents title="嫁娶形式"></Parents>
      <Parents
        :workArea="children"
        :value="childrenValue"
        :changePicker="changePickerChildren"
        title="子女情况"
      >
      </Parents>
      <Parents title="养宠物吗"></Parents>
      <Parents title="兴趣爱好"></Parents>
    </view>
    <view class="segmentation"></view>
    <view class="bottom">
      <Parents
        :workArea="blood"
        :value="bloodValue"
        :changePicker="changePickerBlood"
        title="血型"
      ></Parents>
      <Parents
        :workArea="nation"
        :value="nationValue"
        :changePicker="changePickerNation"
        title="民族"
      ></Parents>
    </view>
    <!-- 后续需求发生更改请写入这里 -->
    <view class="station"></view>
    <view class="footer-button">
      <button
        style="background-image: linear-gradient(to right, #40ade3, #90cde7); border-radius: 40rpx"
      >
        下一步(2)
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import Parents from '../components/Profile/Parents.vue'

import { ref } from 'vue'
//
const parents = ref<string[]>(['父母均健在', '只有母亲健在', '只有父亲健在', '父母均已离世'])
const stay = ref<string[]>(['愿意', '不愿意', '示具体情况而定', '尊重伴侣意见'])
const smoke = ref<string[]>(['不吸', '偶儿吸', '正常吸烟量', '吸烟频次高', '正在戒烟', '已经戒了'])
const children = ref<string[]>(['未育', '子女归自己', '子女归对方'])
const blood = ref<string[]>(['A型', 'B型', 'AB型', 'O型', '其他或未知'])
const nation = ref<string[]>([
  '汉族',
  '壮族',
  '满族',
  '回族',
  '苗族',
  '维吾尔族',
  '土家族',
  '彝族',
  '蒙古族',
  '藏族',
  '布依族',
  '侗族',
  '瑶族',
  '朝鲜族',
  '白族',
  '哈尼族',
  '哈萨克族',
  '黎族',
  '傣族',
  '畲族',
  '傈僳族',
  '仡佬族',
  '东乡族',
  '高山族',
  '拉祜族',
  '水族',
  '佤族',
  '纳西族',
  '羌族',
  '土族',
  '仫佬族',
  '锡伯族',
  '柯尔克孜族',
  '达斡尔族',
  '景颇族',
  '毛南族',
  '撒拉族',
  '布朗族',
  '塔吉克族',
  '阿昌族',
  '普米族',
  '鄂温克族',
  '怒族',
  '京族',
  '基诺族',
  '德昂族',
  '保安族',
  '俄罗斯族',
  '裕固族',
  '乌孜别克族',
  '门巴族',
  '鄂伦春族',
  '独龙族',
  '塔塔尔族',
  '赫哲族',
  '珞巴族',
])

const parentValue = ref<string>()
const smokeValue = ref<string>()
const stayValue = ref<string>()
const childrenValue = ref<string>()
const bloodValue = ref<string>()
const nationValue = ref<string>()

const changePickerParent = (e: Event): void => {
  parentValue.value = parents.value[e.detail.value]
}
const changePickerStay = (e: Event): void => {
  stayValue.value = stay.value[e.detail.value]
}
const changePickerSmoke = (e: Event): void => {
  smokeValue.value = smoke.value[e.detail.value]
}
const changePickerChildren = (e: Event): void => {
  childrenValue.value = children.value[e.detail.value]
}
const changePickerBlood = (e: Event): void => {
  bloodValue.value = blood.value[e.detail.value]
}
const changePickerNation = (e: Event): void => {
  nationValue.value = nation.value[e.detail.value]
}
</script>

<style lang="scss" scoped>
.detailtitle {
  width: 100%;
  height: 90vh;

  .station {
    height: 21%;
  }

  .footer-button {
    position: sticky;
    bottom: 2%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;

    button {
      color: #fff;
    }
  }

  .segmentation {
    width: 100vw;
    height: 1%;
    padding: 0 3%;
    background-color: #f5f5f5;
    margin-left: -3%;
  }

  .bottom {
    margin-left: 20rpx;
  }
}
</style>
